<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="imageName" label="图像名称"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status">
            {{ getTagName(scope.row.status) }}
          </el-tag>
        </template>

      </el-table-column>
      <el-table-column prop="finishTime" label="完成时间"></el-table-column>
      <el-table-column label="信息">
        <template slot-scope="scope">
<!--          <el-button type="primary" @click="handleViewDetails(scope.row.id,scope.row.imageName)">查看详情</el-button>-->
          <el-button @click="handleViewDetails(scope.row.imageName)" type="text">查看详情</el-button>
          <el-button type="text" @click="downloadReport(scope.row.imageName)">生成报告</el-button>

        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

import axios from 'axios';
import moment from "moment";


const tagStatusMap = {
  success: "成功",
  warning: "上传中",
  danger: "异常",
  info: "待上传",
  primary: "预测中"
};

export default {
  name: "ResultList",
  data() {
    return {
      tableData: [],
      tagStatus: tagStatusMap,
    };
  },
  mounted() {
    // 在组件挂载时查询 MySQL 数据库并获取数据
    this.fetchData();
  },

  computed: {
    getTagName() {
      return function (status) {
        return this.tagStatus[status];
      };
    }
  },

  methods: {
    fetchData() {
      // this.tableData = [{'imageName': '01a7d587-5815-479d-8292-9b4e6ee8f74b.nii.gz', 'status': 'success', 'finishTime': '2023-07-15 21:43:06'}, {'imageName': '02de3b59-442b-42f9-9182-0c21c5eae0de.nii.gz', 'status': 'success', 'finishTime': '2023-07-15 23:02:39'}, {'imageName': '0b2be9e0-886b-4144-99f0-8bb4c6eaa848.nii.gz', 'status': 'success', 'finishTime': '2023-07-15 22:18:16'}, {'imageName': '0c593893-56d7-4169-8f8e-703d9b205196.nii.gz', 'status': 'success', 'finishTime': '2023-07-15 22:05:43'}, {'imageName': '0d60fa6b-4afc-40be-9480-c043bf254db1.nii.gz', 'status': 'success', 'finishTime': '2023-07-15 21:52:03'}, {'imageName': '1747470c-9609-4af4-ba20-5a7744efc43a.nii.gz', 'status': 'success', 'finishTime': '2023-07-24 18:16:09'}, {'imageName': '1d2eb6ec-dd72-4926-ab9e-df9f58837b0a.nii.gz', 'status': 'success', 'finishTime': '2023-07-15 21:27:43'}, {'imageName': '365ac789-e415-412a-8391-fd9ec46fe258.nii.gz', 'status': 'success', 'finishTime': '2023-07-21 22:46:14'}, {'imageName': '4e9d3831-e8ad-45da-a2e2-471f0f03f148.nii.gz', 'status': 'success', 'finishTime': '2023-07-16 00:13:45'}, {'imageName': '531e0b7f-21c8-4495-a364-5a306eff03fd.nii.gz', 'status': 'success', 'finishTime': '2023-08-05 18:11:17'}, {'imageName': '53405140-adf0-49b1-92f7-34e954496640.nii.gz', 'status': 'danger', 'finishTime': 'None'}, {'imageName': '78e5f12e-c374-451c-9e71-490e806bc049.nii.gz', 'status': 'success', 'finishTime': '2023-08-05 18:22:18'}, {'imageName': '796ef616-9ee6-4fa6-bd07-ae88261df93f.nii.gz', 'status': 'success', 'finishTime': '2023-07-24 15:22:07'}, {'imageName': 'c9bb5a87-1dc9-4a19-b375-841328b6e2e6.nii.gz', 'status': 'success', 'finishTime': '2023-08-05 18:14:22'}];
    axios.get('/search_prd')
      .then(response => {
        this.tableData = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
    downloadReport(fileName) {
      axios.get(`/downloadReport?fileName=${fileName}`, { responseType: "blob" })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "report.pdf");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((error) => {
          console.error("Error while downloading the report.", error);
        });
    },

    handleViewDetails(fileName) {

      // 处理查看详情按钮的点击事件
      const url = `#/details?fileName=${encodeURIComponent(fileName)}`;

      window.open(url, "_blank")
      // this.$router.push({ path: `/details/`,query: { fileName } });
      // 根据需要执行其他操作，例如跳转到详情页
    }
  }
}
</script>

<style scoped>
.red{
  color: red;
}
</style>
